<template>
  <Page name="充值">
    <div name="title"></div>
    <form @keypress.enter="submit" onsubmit="return false">
      <div class="form-card mt20">
        <div class="item fx fx-vc fx-between" @click="showAccountySheet=true">
          <div class="label">充值到币种账户</div>
          <div class="right">
            <div class="fx-center">
              <span class="currency mr12" :class="{'currency-empty':!form.account}">{{showAccountText}}</span>
              <i class="css-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="form-card mt20">
        <div class="item fx fx-vc fx-between">
          <div class="label">充值方式</div>
          <div class="right">
            <div class="fx-center">
              <span class="currency mr12">现金</span>
            </div>

            <!-- <div class="fx-center">
              <span class="currency mr12" :class="{'currency-empty':!form.currency_code}">{{showCurrencyText}}</span>
              <i class="css-arrow-right"></i>
            </div> -->
          </div>
        </div>

        <div class="item fxv momey-item">
          <div class="label">充值金额</div>
          <Input
            v-model="form.amount"
            filter="float"
            maxlength="11"
            placeholder="请输入可提供的充值资金" />
        </div>
      </div>
      <div class="form-btn">
        <button type="button" :disabled="!formValid || posting || lock"  class="btn btn-primary btn-block submit" @click="submit">下一步</button>
      </div>
    </form>

    <!-- 币种账户选择 -->
    <ActionSheet
      v-if="showAccountySheet"
      title="选择充值到币种账户"
      :list="accountCode"
      :value="form.account"
      @close="showAccountySheet = false"
      @select="selectAccount"
      />

    <!-- 币种选择 -->
    <ActionSheet
      v-if="showCurrencySheet"
      title="选择充值资金币种"
      :list="currencyCode"
      :value="form.currency_code"
      @close="showCurrencySheet = false"
      @select="selectCurrency"
      />

  </Page>
</template>

<script>
import Input from "~/components/Input"
import Page from '~/components/page'
import ActionSheet from "~/components/ActionSheet"
export default {
  components: {
    ActionSheet,
    Page,
    Input
  },
  asyncData({ store,query }){
    let currencys = store.state.currencys || [];
    currencys = currencys.map(item=>{
      return Object.assign(item,{
        label:item.name,
        value:item.code,
      })
    });


    let form;
    try{
      form = JSON.parse(JSON.stringify(store.state.recharge.form));
    }catch(e){

    }
    if(!form) {
        form = {
        pay_type: 1,
        account: '',
        amount: '',
        currency_code: '',
      };
    }

    if(query.code){
      form.account = query.code;
      form.currency_code = query.code;
    }

    return {
      accountCode:currencys,
      currencyCode:currencys,
      form,
    }
  },
  data: function() {
    return {
      showAccountySheet: false,
      showCurrencySheet: false,
      posting: false,
      lock:false,
    };
  },
  computed: {
    showAccountText(){;
      let text = '请选择'
      let active = this.accountCode.find(item=>item.value == this.form.account);
      if(active){
        text = active.label;
      }
      return text;
    },
    showCurrencyText(){;
      let text = '请选择'
      let active = this.currencyCode.find(item=>item.value == this.form.currency_code);
      if(active){
        text = active.label;
      }
      return text;
    },
    formValid(){
      return String(this.form.currency_code).trim() && String(this.form.account).trim() && String(this.form.amount).trim();
    }
  },
  methods: {
    selectAccount(item){
      this.form.account = item.value
      this.form.currency_code = item.value;
    },
    selectCurrency(item){
      this.form.currency_code = item.value;
    },
    submit() {
      if(!this.formValid || this.posting || this.lock) return false;
      //进入下一步，缓冲用户信息
      this.$store.commit('recharge/setForm',this.form);
      this.$router.push("recharge/confirm");
    },
  }
};
</script>

<style lang="less" scoped>
  .form-card {
    .amount-box {
      position:relative;
      .tip-box {
        position:absolute;
        left:0;
        bottom:30px;
        margin:0 30px;
      }
    }
    .item {
      padding:30px;
      background-color:#fff;
      & + .item {
        border-top:1px solid #ededf0;
      }
      &.momey-item {
        .label {
          margin-bottom: 50px;
        }
      }
      .label {
        font-size:32px;
        color:#292929;
      }
      .currency {
        &.currency-empty {
          color:#c0c3cc;
        }
        font-size:30px;
        color:#292929;
      }
    }
  }
  .form-btn {
    padding:30px;
    margin-top:60px;
  }

  .info-card {
    padding:40px;
    background-color:#fff;
    border-bottom:1px solid #ededf0;
    .avatar {
      width: 140px;
      height:140px;
      border-radius: 50%;
      overflow: hidden;

      img {
        display: block;
        width:100%;
        height: 100%;
      }
    }

    .name {
      .text-ellipsis();
      max-width:100%;
      margin-top:20px;
      font-size:32px;
      color:#292929;
    }
    .account {
      .text-ellipsis();
      max-width:100%;
      margin-top:20px;
      font-size:28px;
      color:#999;
    }
    .check {
      margin-top:30px;
      font-size:28px;
      color:#2086f9;

      .ok {
        color:#d39b00;
      }
    }
  }

  .check-name-box {
    display: flex;
    align-items: center;
    font-size:28px;
    input {
      margin-top:20px;
      margin-right:40px;
      font-size:28px;
      flex:1;
      height:70px;
      padding:0 10px;
      border-radius: 4px;
      border:1px solid #c0c3cc;
    }
  }
</style>
